<template>
  <div class="app-container">
    <!-- 搜索 -->
    <el-card class="box-card">
      <div class="query-card">
        <!-- <el-row type="flex" align="middle">
        <el-col :span="12">-->
        <div class="grid-content bg-purple search">
          <el-form ref="query" :model="query" label-width="100px">
            <el-form-item style="margin-bottom:0px" label="手机号">
              <i slot="label" class="el-icon-search" style="font-size:20px"></i>
              <el-input style="width:260px" v-model="query.keywords" placeholder="请输入手机号搜索"></el-input>
            </el-form-item>
            <el-form-item style="margin-bottom:0px" label="操作日期">
              <el-date-picker
                ref="picker"
                v-model="query.timeArr"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions"
              ></el-date-picker>
            </el-form-item>
            <el-form-item style="margin-bottom:0px" label="赠送类型">
              <el-select v-model="query.type" placeholder="请选择赠送类型">
                <el-option label="全部" value="0"></el-option>
                <el-option label="商品" value="1"></el-option>
                <el-option label="余额" value="2"></el-option>
                <el-option label="积分" value="3"></el-option>
                <el-option label="删除赏袋" value="4"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item style="margin-bottom:0px" label="赠送状态">
              <el-select v-model="query.status" placeholder="请选择赠送状态">
                <el-option label="全部" value="0"></el-option>
                <el-option label="待审核" value="1"></el-option>
                <el-option label="同意" value="2"></el-option>
                <el-option label="拒绝" value="3"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <!-- </el-col> -->
        <!-- <el-col :span="12"> -->
        <div class="grid-content bg-purple-light">
          <el-button type="primary" @click="queryAsk">查询</el-button>
          <el-button @click="queryReset">重置</el-button>
        </div>
        <!-- </el-col>
        </el-row>-->
      </div>
    </el-card>

    <!-- 表格 -->
    <el-card class="box-card" v-loading="loading">
      <img
        class="watermark"
        v-if="baseApi== 'https://testouhun.wm2177.com'"
        style="left: 0;"
        src="@/assets/watermark.png"
      />

      <el-table
        :data="tableData"
        border
        style="width: 100%;margin-bottom: 20px;"
        v-loading="loading"
        :header-cell-style="{background:'#eee'}"
      >
        <el-table-column align="center" type="index" width="50" label="序号"></el-table-column>
        <el-table-column align="center" prop="nickname" label="用户昵称"></el-table-column>
        <el-table-column align="center" prop="mobile" label="手机号"></el-table-column>
        <el-table-column align="center" prop="data" label="余额"></el-table-column>
        <el-table-column align="center" label="充值类型">
          <template slot-scope="scope">
            <div v-if="scope.row.give_type==1">充值</div>
            <div v-if="scope.row.give_type==2">赠送</div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="赠送背包方式">
          <template slot-scope="scope">
            <div v-if="scope.row.bag_type==1">背包</div>
            <!-- <div v-if="scope.row.bag_type==2">宝箱</div> -->
          </template>
        </el-table-column>
        <el-table-column align="center" label="加减类型">
          <template slot-scope="scope">
            <div v-if="scope.row.in_type==1">加</div>
            <div v-if="scope.row.in_type==2">减</div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="加减类型">
          <template slot-scope="scope">
            <div v-if="scope.row.in_type==1">加</div>
            <div v-if="scope.row.in_type==2">减</div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="赠送类型">
          <template slot-scope="scope">
            <div v-if="scope.row.type==1">商品</div>
            <div v-if="scope.row.type==2">余额</div>
            <div v-if="scope.row.type==3">积分</div>
            <div v-if="scope.row.type==4">删除赏袋</div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="赠送/删除信息">
          <template slot-scope="scope">
            <el-popover v-if="scope.row.type==1" placement="right" trigger="click">
              <el-table :data="scope.row.goods_data">
                <el-table-column align="center" width="180" property="goods_name" label="商品名称"></el-table-column>
                <el-table-column align="center" property="num" label="数量"></el-table-column>
                <el-table-column align="center" property="price" label="价格"></el-table-column>
              </el-table>
              <el-button slot="reference">{{scope.row.goods_data.length+'件'}}</el-button>
            </el-popover>
            <el-popover v-else-if="scope.row.type==4" placement="right" trigger="click">
              <el-table :data="del_data">
                <el-table-column align="center" width="180" property="goods_name" label="商品名称"></el-table-column>
                <el-table-column align="center" property="price" label="价格"></el-table-column>
              </el-table>
              <el-button slot="reference" @click="getDelInfo(scope.row.id)">{{"点击查看"}}</el-button>
            </el-popover>
            <div v-else>-</div>
          </template>
        </el-table-column>
        <el-table-column align="center" width="160px" prop="add_time" label="添加时间"></el-table-column>
        <el-table-column align="center" width="160px" prop="update_time" label="更新时间"></el-table-column>
        <el-table-column align="center" prop="admin_name" label="操作人"></el-table-column>
        <el-table-column align="center" prop="examine_name" label="审批人"></el-table-column>
        <el-table-column align="center" label="审批状态">
          <template slot-scope="scope">
            <div v-if="scope.row.status==1">待审核</div>
            <div v-if="scope.row.status==2">同意</div>
            <div v-if="scope.row.status==3">拒绝</div>
          </template>
        </el-table-column>
        <el-table-column fixed="right" align="center" label="操作" width="150">
          <template slot-scope="scope">
            <el-popconfirm
              confirmButtonText="好的"
              cancelButtonText="不用了"
              icon="el-icon-info"
              iconColor="red"
              title="是否确认同意？"
              @onConfirm="oprate(scope.row,'1')"
            >
              <el-button
                slot="reference"
                type="text"
                size="small"
                :disabled="scope.row.status!=1"
              >同意</el-button>
            </el-popconfirm>
            <el-popconfirm
              confirmButtonText="好的"
              cancelButtonText="不用了"
              icon="el-icon-info"
              iconColor="red"
              title="是否确认驳回？"
              @onConfirm="oprate(scope.row,'2')"
            >
              <el-button
                slot="reference"
                style="margin-left:10px;color:red"
                type="text"
                size="small"
                :disabled="scope.row.status!=1"
              >驳回</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align:right">
        <el-pagination
          background
          layout="prev, pager, next"
          :current-page="currentPage"
          :total="total"
          @current-change="currentChange"
        ></el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import { giveList, giveOprate, delGiveInfo } from '@/api/marketing'
import { parseTime } from '@/utils/index'

export default {
  name: 'BoutiqueReviewList',
  data() {
    return {
      baseApi: process.env.VUE_APP_BASE_API,
      // 分页数据
      total: 0,
      currentPage: 1,
      pageSize: 10,
      //query
      query: {
        keywords: '',
        add_time: '',
        status: '0',
        timeArr: [],
        type: '0'
      },
      userId: '',
      tableData: [],
      activeName: '0',
      loading: false,
      picktime: '1',
      pickerOptions: {
        shortcuts: [
          {
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', [new Date(), new Date()])
            }
          },
          {
            text: '近半月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 15)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      del_data: []
    }
  },
  mounted() {
    this.getList()
  },
  activated() {
    this.total = 0
    this.currentPage = 1
    this.pageSize = 10
    this.query.add_time = ''
    this.query.keywords = ''
    this.query.status = '0'
    this.picktime = 1
    this.query.timeArr = [new Date(), new Date()]
    this.getList()
  },
  methods: {
    // 获取列表
    async getList() {
      this.loading = true
      console.log(this.query.timeArr)
      if (this.query.timeArr.length > 1) {
        this.query.add_time =
          parseTime(this.query.timeArr[0], '{y}-{m}-{d}') +
          ',' +
          parseTime(this.query.timeArr[1], '{y}-{m}-{d}')
      }

      const res = await giveList({
        page: this.currentPage,
        limit: this.pageSize,
        keywords: this.query.keywords,
        status: this.query.status,
        add_time: this.query.add_time,
        type: this.query.type
      })
      console.log(res)
      this.loading = false
      this.total = res.count
      this.tableData = res.data
      this.tableData.forEach((item) => {
        if (item.add_time == 0) {
          item.add_time = '-'
        } else {
          item.add_time = parseTime(item.add_time, '{y}-{m}-{d} {h}:{i}:{s}')
        }
        if (item.update_time == 0) {
          item.update_time = '-'
        } else {
          item.update_time = parseTime(
            item.update_time,
            '{y}-{m}-{d} {h}:{i}:{s}'
          )
        }
      })
    },
    queryAsk() {
      console.log(this.query)
      this.currentPage = 1
      this.getList()
    },
    queryReset() {
      this.total = 0
      this.currentPage = 1
      this.pageSize = 10
      this.query.add_time = ''
      this.query.keywords = ''
      this.query.status = '1'
      this.picktime = 1
      this.query.timeArr = [new Date(), new Date()]
      this.getList()
    },
    //分页改变
    currentChange(current) {
      this.currentPage = current
      this.getList()
    },
    async oprate(row, type) {
      const res = await giveOprate({ id: row.id, type: type })
      if (res.st == 1) {
        this.$message({
          message: '操作成功',
          type: 'success'
        })
        this.getList()
      } else {
        console.log(res)
        this.$message.error('操作失败！')
      }
    },

    async getDelInfo(id) {
      const res = await delGiveInfo({ id: id })
      console.log(res)
      this.del_data = res.data
    }
  }
}
</script>

<style lang="scss" scoped>
.query-card {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .search {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
}
.box-card {
  margin-bottom: 20px;
}
::v-deep .el-drawer.rtl {
  width: 650px !important;
  overflow: auto;
}
.query-card {
  ::v-deep .el-form {
    display: flex;
  }
}

::v-deep .el-drawer.rtl {
  padding-bottom: 20px;
  width: 1000px !important;
  overflow: auto;
}
::v-deep .el-button.is-disabled,
.el-button.is-disabled:hover,
.el-button.is-disabled:focus {
  color: #c0c4cc !important;
}
</style>